
import React, { useState, useEffect }  from 'react';
import Picker, {useSelectedStatus, ItemType} from './Picker';
import {Checkbox, Col, Row} from 'antd';
import { RowProps } from 'antd/lib/row';

/**
 * example: 多级 picker
 */

MyPicker.defaultProps = {
  ...Picker.defaultProps
}

function MyPicker(props: RowProps) {
  const data = [{id: 1, name: '123'}, {id: 2, name: '456'}, {id: 3, name: '789'}, {id: 4, name: 'abc'}];
  const [value, setValue] = useState<ItemType[]>([]);
  const [, checkboxProps] = useSelectedStatus(data, value, setValue);
  useEffect(() => {
    console.log(value);
  })
  return (<div>
    <Row {...props}>
      <Col span={24}>
        <Checkbox {...checkboxProps}>第一级</Checkbox>
      </Col>
      <Col span={24}>
        <Picker label="第二级 - 1" data={data.slice(0, value.length)} value={value} onChange={setValue} />
      </Col>
      <Col span={24}>
        <Picker label="第二级 - 2" data={data.slice(value.length)} value={value} onChange={setValue} />
      </Col>
    </Row>
  </div>);
}

export default React.memo(MyPicker)
